<template>
  <div class="app-container">
    <!-- 搜索模块 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      
      <el-form-item label="井号">
        <el-input v-model="queryParams.wellname" placeholder="井号" size="small" style="width: 240px"  />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 图标权限模块 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-s-data" size="mini" @click="isEcharts=!isEcharts" v-show="!isEcharts">图表</el-button>
        <el-button type="primary" plain icon="el-icon-s-grid" size="mini" @click="isEcharts=!isEcharts" v-show="isEcharts">数据</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-row>
      <div id="wellEcharts" v-show="isEcharts" class="draw_div"></div>
    </el-row>
    <!-- 展示模块 -->
    <el-table v-loading="loading" :data="approveList" v-show="!isEcharts">
      <el-table-column prop="wellname" label="井号" align="center" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="pfztz" label="批复总投资" align="center" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.pfztz }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pfzjtz" label="批复钻井投资" align="center" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="pfsytz" label="批复试油投资" align="center" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="ztz" label="总投资" align="center" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-tag size="medium" type='danger'>{{ scope.row.ztz }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="zjxj" label="钻井小计" align="center" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="syxj" label="试油小计" align="center" :show-overflow-tooltip="true" ></el-table-column>
      
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"  v-if="!isEcharts"/>

  </div>
</template>
  
<script>
import { listApproveCostType } from "@/api/vadmin/budget/approve/approveapi";
import { Decrypt } from "@/utils/AesHmacMD5";
import echarts from "echarts";
import { foldLineHistogram, Histogram } from "@/utils/echartsDraw";

export default {
  name: "wellwarning",
  data() {
    return {
      // 遮罩层
      loading: true,isEcharts:false,
      // 选中数组
      ids: [],
      valNames: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 批复表格数据
      approveList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,  // 当前页数
        pageSize: 10,  // 每页显示几个
        wellname: '',regionid:''
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    // 初始化模板列表
    this.getList();
  },
  methods: {
    /** 查询预警信息 */
    getList() {
      this.loading = true;
      listApproveCostType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        var resData = JSON.parse(Decrypt(response.data))
        this.approveList = resData.results;
        this.total = resData.count;
        this.loading = false;
        this.changeView()
      });
    },
    changeView(){
      debugger
      var titleList = ["批复总投资", "实际总投资"];
      var x_weeks = [],y_weeks1=[],y_weeks2=[];
      for(var i=0;i<this.approveList.length;i++){
        x_weeks.push(this.approveList[i].wellname)
        y_weeks1.push(this.approveList[i].pfztz1)
        y_weeks2.push(this.approveList[i].ztz1)
      }
      var element = document.getElementById("wellEcharts");
      var myChart = echarts.init(element);

      foldLineHistogram(myChart, titleList, x_weeks, [y_weeks1,y_weeks2]);
    },
    // 表单重置
    reset() {
      this.queryParams = {
        wellname: '',
        scyearene: ''
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 文件下载 **/
    handleDownload(row) {
      this.download(row.path, row.name);
    },
  }
};
</script>
     <style scoped>
::v-deep .el-table th.el-table__cell > .cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    white-space: nowrap !important;
}
.draw_div {
    height: 500px;
    /* width: 100%; */
    width: 1500px;
    margin-top: 20px;
}
  </style>